<template>
  <view class="top-nav">
    <view
      v-for="(item, index) in condition"
      :key="index"
      @click="conditionSel(index)"
    >
      <text>{{ item.query_val }}</text>
      <image
        :src="
          index == 0
            ? '/static/other/shaixuan-jiantou.png'
            : '/static/other/shaixuan.png'
        "
        mode=""
      />
    </view>
  </view>
  <!-- 遮罩层 -->
  <view class="mask-layer" v-if="isSelAll" @click="conditionSel(0)"></view>
  <!-- 弹出层 -->
  <view :class="['popups', { popupsTranfrom: isshow }]" @click="showPopups">
    <template v-if="condition.length > 0">
      <view
        v-for="(item, index) in condition[0].filter_val"
        :key="index"
        @click="SelType(item)"
      >
        {{ item }}
      </view>
    </template>
  </view>
  <view
    class="BookingSelAll block"
    v-for="(item, index) in combo_data"
    :key="index"
    @click="toDetail(item._id, item.title)"
  >
    <view class="top-title"> {{ item.title }} </view>
    <view class="center">
      <image :src="item.image" mode="aspectFill" />
      <view class="text-dec">
        <text class="be_suit">{{ item.be_suit }}</text>
        <text class="describe">{{ item.describe }}</text>
      </view>
    </view>
    <view class="bottom">
      <view class="sales">已约{{ item.sales }}</view>
      <view class="price">￥{{ item.price }}</view>
    </view>
  </view>
  <!-- 骨架屏 -->
  <skIndex v-if="skeLeton"></skIndex>
</template>

<script setup>
import { ref, onMounted, reactive, watch } from "vue";
import apiRequest from "~/api/index";
import skIndex from "~/Skeleton/SK-phy-exam.vue";
// 筛选条件
let condition = ref([]);
// 套餐数据
let combo_data = ref([]);
// 骨架屏
let skeLeton = ref(true);
onMounted(async () => {
  const res = await Promise.all([
    apiRequest.BookingSelCon(),
    apiRequest.BookingSelAll(),
  ]);
  condition.value = res[0].data;
  // 全部数据
  combo_data.value = res[1].data;
  // 骨架屏
  skeLeton.value = false;
});
// 是否全选
let isSelAll = ref(false);
const SelType = (value) => {
  condition.value[0].query_val = value;
  isSelAll.value = false;
  SelReq_Data.type = value;
};
// 筛选按钮点击事件
const conditionSel = (index) => {
  if (index == 0) {
    console.log("111111");
    isSelAll.value = isSelAll.value ? false : true;
    showPopups();
    console.log(isSelAll.value);
  } else if (index == 1) {
    console.log("222");
    // 销量
    SelReq_Data.sales = SelReq_Data.sales == "asc" ? "desc" : "asc";
  } else if (index == 2) {
    console.log("333");
    // 销量
    SelReq_Data.price = SelReq_Data.price == "asc" ? "desc" : "asc";
  }
};
// 筛选请求参数
let SelReq_Data = reactive({
  type: "",
  sales: "",
  price: "",
});
watch(SelReq_Data, async () => {
  const res = await apiRequest.BookingSeled(SelReq_Data);
  combo_data.value = res.data;
});
// 跳转至详情页
const toDetail = (id, title) => {
  uni.navigateTo({
    url: `/pages/Booking/Booking-Detail?id=${id}&title=${title}`,
  });
};
// isshow 弹出层显示
let isshow = ref(false);
function showPopups() {
  isshow.value = !isshow.value;
}
</script>

<style lang="scss">
/*  */
.top-nav {
  @apply flex bg-light-50;
  height: 100rpx;
}

.top-nav > view {
  @apply flex-1 flex;
  justify-content: center;
  align-items: center;
}

.top-nav view image {
  width: 20rpx;
  height: 20rpx;
  margin-left: 10rpx;
  display: block;
}

.block {
  margin: 20rpx;
  padding: 20rpx;
  @apply bg-light-50;
  border-radius: 20rpx;
}

.BookingSelAll .top-title {
  @apply font-bold;
  font-size: 34rpx;
}

.BookingSelAll .center {
  @apply flex;
}

.BookingSelAll .center image {
  margin: 20rpx 0;
  width: 200rpx;
  height: 200rpx;
  display: block;
  flex-shrink: 0;
}

.BookingSelAll .center .text-dec {
  @apply flex flex-col;
  margin-left: 20rpx;
}

.text-dec .be_suit {
  @apply font-bold;
}

.BookingSelAll .bottom {
  @apply flex text-red-400 font-bold;
  justify-content: space-between;
}

.mask-layer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 100rpx;
  background-color: rgba(0, 0, 0, 0.5);
}

.popups {
  @apply fixed left-0 right-0 bg-light-50;
  top: 100rpx;
  border-bottom-right-radius: 10rpx;
  border-bottom-left-radius: 10rpx;
  transition: all .5s;
  height: 0px;
  padding: 0 78rpx;
  overflow: hidden;
  view {
    display: block;
    padding: 20rpx 0;
  }
}
.popupsTranfrom {
  height: 580rpx;
  overflow: none;
}
</style>
